<template>
    <div class="classify">
      <div class="top">
        <div class="t-left">{{goodArr.name}}</div>
        <div class="t-right" @click="toClass">查看更多</div>
      </div>
      <div class="item">
        <div class="all" ref="content">
          <div class="wrap" :style="'width:'+ width + 'px'">
            <slide-good-item :good="good" :region = "region" v-for="(good, key) in goods" :key="key"></slide-good-item>
          </div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import SlideGoodItem from './slideGoodItem.vue';
  import BScroll from 'better-scroll';

  export default {
    components: {SlideGoodItem},
    name: 'slideGoodList',

    data () {
      return {
        goods: [],
        width: ''
      };
    },
    props: {
      goodArr: {
        type: Object
      },
      region: {
        type: String
      }
    },
    created () {
    },
    methods: {
      // 初始化滚动事件
      tabScroll() {
        let length;
        if (this.goods.length <= 5) {
          length = this.goods.length;
        } else {
          length = 5;
        }
        this.width = length * 310 + 50;
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.content, {
              startX: 0,
              click: true,
              scrollX: true,
              scrollY: false,
              eventPassthrough: 'vertical'
            });
          } else {
            this.scroll.refresh();
          }
        });
      },
      toClass() {
        this.$router.push(
          {
            name: 'class-good',
            query: {
              region: this.region,
              title: this.goodArr.name
            }
          });
      }
    },
    mounted() {
      let ids = this.goodArr.product.slice(0, 5);
      let goods = {
        type: 'simple',
        ids: ids
      };
      this.$Sale.getListGoods(goods).then(res => {
        this.goods = res.data;
        this.$nextTick(() => {
          this.tabScroll();
        });
      }, () => {
      });
    },
    computed: {},
    watch: {}
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .classify
    background-color #fff
    padding-top vw(10)
    position relative
    .top
      display flex
      justify-content space-between
      height vw(30)
      line-height vw(30)
      padding 0 vw(15)
      .t-left
        font-size vw(14)
        color #333
      .t-right
        font-size vw(10)
        color #999
    .item
      width 100vw
      overflow hidden
      .all
        .wrap
          display flex
</style>
